<template>
  <div>
    <vxe-modal
      esc-closable
      destroy-on-close
      :lock-view="false"
      :width="640"
      :height="360"
      v-model="props.openModal"
      resize
      :mask="true"
      @close="cancel"
    >
      <template #title>
        <div class="w100 h100 fsc" style="height: 22px">报警原因分类管理</div>
      </template>
      <template #default>
        <div class="w100 h100 tableBox">
          <div class="box_header">
            <div class="title">原因分类列表</div>
            <div class="btns">
              <div class="btn" @click="addFn">
                <el-icon style="margin: 0 2px 0 0"><Plus /></el-icon>新增
              </div>
            </div>
          </div> 
          <vxe-table :data="tableData" class="table" max-height="176">
            <vxe-column title="序号" type="seq"></vxe-column>
            <vxe-column title="原因类型" field="type"></vxe-column>
            <vxe-column title="操作">
              <template #default="{ row }"> 
                <div style="color:#4488ff;cursor: pointer;" @click="delData(row.id)">删除</div>
              </template>
            </vxe-column>
          </vxe-table>
          <div class="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button @click="cancel" type="primary">确定</el-button>
          </div>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal
      @close="close"
      esc-closable
      destroy-on-close
      :lock-view="false"
      :width="340"
      :height="144"
      v-model="open_add"
      resize
      :mask="true"
    >
      <template #title>
        <div class="w100 h100 fsc" style="height: 22px">新增报警原因分类</div>
      </template>
      <template #default>
        <div class="w100 h100 add_box">
          <div class="item">
            原因类型:
            <el-input
              v-model="form_data.type"
              style="width: 240px; height: 32px"
              placeholder="请输入"
            ></el-input>
          </div>
          <div class="footer">
            <el-button @click="close">取消</el-button>
            <el-button @click="sumbitAdd" type="primary">确定</el-button>
          </div>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>
<script setup>
import {
  computed,
  nextTick,
  onActivated,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  inject,
} from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import axios from "@/utils/request";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const emit = defineEmits(["cancel",'sumbit']);
const props = defineProps({
  openModal: {
    type: Boolean,
    default: false,
  },
});
const form_data = ref({});
const tableData = ref([]);
const open_add = ref(false);

// 获取原因类型列表
const getList = () => {
  axios.post("/realPointType/list", {}).then((res) => {
    tableData.value = res.data.list
  });
};
// 打开新增原因类型弹窗
const addFn = () => {
  open_add.value = true;
};
// 确认提交新增
const sumbitAdd = () => {
  if(form_data.value.type){
    axios.post('/realPointType/add',form_data.value).then(res => {
      if(res.code == 200){
        open_add.value = false;
        ElMessage.success('操作成功')
        form_data.value = {}
        getList()
        emit('sumbit')
      }
    })
  }else{
    ElMessage.warning('原因类型不能为空')
  }
}
// 取消并关闭新增原因类型弹窗
const close = () => {
  open_add.value = false;
  form_data.value = {};
};
// 删除原因类型数据
const delData = (id) => {
  axios.post('/realPointType/del',[id]).then(res => {
    if(res.code == 200){
      ElMessage.success('操作成功')
      getList()
    }
  })
}
// 取消并关闭弹窗
const cancel = () =>{
  emit('cancel')
}

getList()
</script>
<style lang="scss" scoped>
::v-deep .vxe-modal--wrapper .vxe-modal--header {
  padding: 0 !important;
  height: 40px !important;
  background: rgba(64, 158, 255, 0.4);
  border-bottom: none;
}
.tableBox {
  .box_header {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      color: rgba(62, 70, 79, 1);
      font-weight: 700;
    }
    .btns {
      .btn {
        cursor: pointer;
        width: 84px;
        height: 32px;
        background-color: rgba(91, 109, 128, 0.08);
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .table {
    margin: 12px 0 16px 0;
  }
  .footer {
    text-align: end;
  }
}
.add_box {
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer {
    margin: 16px 0 0 0;
    text-align: end;
  }
}
</style>
